<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
  <link rel="stylesheet" href="../../styles/common.css" />
  <link rel="stylesheet" href="../../styles/page.css" />
</head>
<body>
  <div class="addBrand-container" id="course-add-app">
    <div class="container">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        :inline="false"
        label-width="180px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号:" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请填写课程名称" maxlength="20"/>
        </el-form-item>

        <el-form-item label="任课教师:" prop="teacherName">
          <el-select v-model="ruleForm.teacherName" placeholder="请选择任课教师" @change="$forceUpdate()">
            <el-option v-for="(item, index) in teacherList" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="课程分类:" prop="info">
          <el-input v-model="ruleForm.info" placeholder="请填写课程分类" maxlength="20"/>
        </el-form-item>

        <el-form-item label="上课时间:" prop="courseDate">
          <el-select v-model="ruleForm.courseDate" placeholder="请选择上课时间" @change="$forceUpdate()">
            <el-option v-for="(item, index) in courseDateList" :key="index" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="最大人数:" prop="maxNum">
          <el-input v-model="ruleForm.maxNum" placeholder="请填写课程最大人数" maxlength="20"/>
        </el-form-item>
        <div class="subBox address">
          <el-form-item>
            <el-button  @click="goBack()">
              取消
            </el-button>
            <el-button
              type="primary"
              @click="submitForm('ruleForm', false)"
            >
              保存
            </el-button>
            <el-button
              v-if="actionType == 'add'"
              type="primary"
              class="continue"
              @click="submitForm('ruleForm', true)"
            >
              保存并继续添加
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <script src="../../js/request.js"></script>
    <script src="../../api/course.js"></script>
    <script src="../../js/validate.js"></script>
    <script src="../../js/index.js"></script>
    <script src="../../api/teacher.js"></script>
    <script>
      new Vue({
        el: '#course-add-app',
        data() {
          return {
            id: '',
            teacherName:[],
            courseDateList :[{id:1,name:'周一 一二节'},
              {id:2,name:'周二 一二节'},
              {id:3,name:'周三 一二节'},
              {id:4,name:'周四 一二节'},
              {id:5,name:'周五 一二节'}],
            actionType : '',
            teacherList:[],
            ruleForm : {
                name: '',
                teacherName:'' ,
                info: '',
                maxNum: '',
                courseDate:''
            }
          }
        },
        computed: {
          rules () {
            return {
              //姓名
              name: [{ required: true, 'trigger': 'blur' }],
              teacherName: [{ 'required': true, 'trigger': 'blur' }],
              maxNum: [{ 'required': true,'trigger': 'blur' }],
              courseDate:[{'required':true,'trigger':'blur'}],
              info:[{'required':true,'trigger':'blur'}]
            }
          }
        },
        created() {
          this.getAllTeacherList()
          this.id = requestUrlParam('id')
          this.actionType = this.id ? 'edit' : 'add'
          if (this.id) {
            this.init()
          }
        },
        mounted() {
        },
        methods: {
          async init () {
            queryEmployeeById(this.id).then(res => {
              console.log(res)
              if (String(res.code) === '1') {
                console.log(res.data)
                this.ruleForm = res.data
              } else {
                this.$message.error(res.msg || '操作失败')
              }
            })
          },
          getAllTeacherList() {
            allTeacherList({ type: 2, page: 1, pageSize: 1000 }).then((res) => {
              if (res.code === 1) {
                this.teacherList = res.data.map((obj) => ({ ...obj, teacherName: obj.id }))
              } else {
                this.$message.error(res.msg || '操作失败')
              }
            })
          },
          submitForm (formName, st) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                  const params = {
                    ...this.ruleForm,
                  }
                  addCourse(params).then(res => {
                    if (res.code === 1) {
                      this.$message.success('课程添加成功！')
                      if (!st) {
                        this.goBack()
                      } else {
                        this.ruleForm = {
                            name: '',
                            teacherName:[] ,
                            info: '',
                            maxNum: '',
                            courseDate:[]
                        }
                      }
                    } else {
                      this.$message.error(res.msg || '操作失败')
                    }
                  }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                  })
              } else {
                console.log('error submit!!')
                return false
              }
            })
          },
          goBack(){
            window.parent.menuHandle({
              id: '5',
              url: '/backend/page/course/list.html',
              name: '课程管理'
            },false)
          }
        }
      })
    </script>
</body>
</html>